<template>
  <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path">
    <template #title>
      <el-icon><el-icon-menu /></el-icon>
      <span>{{ item.meta?.title }}</span>
    </template>
    <menu-item v-for="(item1, index) in item.children" :key="index" :item="item1"></menu-item>
  </el-sub-menu>
  <el-menu-item v-else :index="item.path">
    <el-icon><el-icon-list /></el-icon>
    <span>{{ item.meta?.title }}</span>
  </el-menu-item>
</template>

<script lang="ts" setup>
  import { type RouteRecordRaw } from 'vue-router';
  import menuItem from './index.vue';

  defineProps<{
    item: RouteRecordRaw;
  }>();
</script>

<style lang="scss" scoped>
  .el-menu {
    border-right: none;
  }
</style>
